:root {
  /* 主色调 - 专业蓝色系 */
  --primary-50: #e8f4ff;
  --primary-100: #c5e5ff;
  --primary-200: #a1d3ff;
  --primary-300: #7dc1ff;
  --primary-400: #58afff;
  --primary-500: #3498ff; /* 主蓝色 */
  --primary-600: #2c80d4;
  --primary-700: #2468aa;
  --primary-800: #1c5080;
  --primary-900: #143855;
  
  /* 辅助色 - 医疗绿色 */
  --secondary-50: #f0f9f0;
  --secondary-100: #daf2da;
  --secondary-200: #c4ebc4;
  --secondary-300: #aee4ae;
  --secondary-400: #98dd98;
  --secondary-500: #82d682; /* 医疗绿 */
  --secondary-600: #6cb46c;
  --secondary-700: #569256;
  --secondary-800: #407040;
  --secondary-900: #2a4e2a;
  
  /* 中性色 */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  
  /* 语义色 */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;
  
  /* 可视化专用色 */
  --heatmap-low: #d8e6ff;     /* 低密度 */
  --heatmap-medium: #3498ff;  /* 中密度 */
  --heatmap-high: #ff5252;    /* 高密度 */
  --trajectory-normal: #82d682; /* 普通轨迹 */
  --trajectory-emergency: #ff5252; /* 紧急轨迹 */
  --bottleneck: #ff9800;      /* 瓶颈点 */
  --optimized-path: #9c27b0;  /* 优化路径 */
  
  /* 三维场景颜色 */
  --3d-wall: #e0e0e0;
  --3d-floor: #f5f5f5;
  --3d-door: #bbbbbb;
  --3d-window: #a0d0ff;
  --3d-asset: #b388ff;
  
  /* 背景与表面 */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #fafafa;
  
  /* 文本颜色 */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-disabled: rgba(0, 0, 0, 0.38);
  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;
  
  /* 阴影 */
  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.14);
  
  /* 边框 */
  --border-light: 1px solid var(--gray-200);
  --border-medium: 1px solid var(--gray-300);
  --border-heavy: 1px solid var(--gray-400);
  
  /* 圆角 */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-full: 9999px;
  
  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  
  /* 响应式断点 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 600px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1920px;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --surface: #1e1e1e;
    --surface-elevated: #2d2d2d;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-disabled: rgba(255, 255, 255, 0.38);
    
    /* 调整热力图颜色以适应暗色背景 */
    --heatmap-low: #1a3c6e;
    --heatmap-medium: #2c5aa0;
    --heatmap-high: #ff6b6b;
    
    /* 三维场景颜色调整 */
    --3d-wall: #3a3a3a;
    --3d-floor: #2a2a2a;
  }
}

/* 移动端优化 */
@media (max-width: 599px) {
  :root {
    --space-5: 16px;
    --space-6: 24px;
  }
} 